<template>
  <div>
    <head-top
      title="购物车"
      :handle="handlemsg ? '管理' : '完成'"
      @handle="handle"
    ></head-top>
    <div class="goodslist">
      <ul>
        <li
          v-cloak
          v-if="goodslist ? goodslist.length === 0 : false"
          style="width: 100%"
        >
          <img style="width: 100%" src="../../assets/img/kong.jpg" />
        </li>
        <li v-for="item in goodslist" :key="item.id">
          <van-checkbox
            :value="item.selected"
            @click="setGoodsChecked(item.key, !item.selected)"
            checked-color="#ee0a24"
          />
          <van-swipe-cell>
            <van-card
              :num="item.number"
              :price="item.price"
              class="goods-card"
              :title="item.name"
              :thumb="item.pic"
            />
            <van-stepper
              v-model="item.number"
              @change="setGoodsNum(item.key, item.number)"
              theme="round"
              button-size="22"
              disable-input
            />
            <template #right>
              <van-button
                @click="delthisGoods(item.key)"
                square
                text="删除"
                type="danger"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>
        </li>
      </ul>
    </div>
    <van-submit-bar
      @submit="goOrder"
      :price="goodsPrice * 100"
      button-text="提交订单"
    >
      <button class="dellall" v-if="!handlemsg" @click="delCheckedGoods">
        删除
      </button>
      <van-checkbox v-model="allChecked" checked-color="#ee0a24"
        >全选</van-checkbox
      >
    </van-submit-bar>
    <my-tabbar />
  </div>
</template>

<script>
import { getToken } from '_utils/token.js'
import MyTabbar from '../../components/tabbar.vue'
import HeadTop from '../../components/headtop.vue'
import { Dialog, Toast } from 'vant'
import { mapActions, mapState } from 'vuex'

export default {
  name: 'cart',
  data () {
    return {
      goodsallnum: 0, // 商品总数量
      goodsallprice: 0 // 商品总价
    }
  },
  components: { MyTabbar, HeadTop },
  created () {
    this.$store.dispatch('Cart/GET_CART_LIST', {
      token: getToken()
    })
  },
  methods: {
    ...mapActions('Cart', [
      'HANDLE',
      'GET_CART_LIST',
      'SET_GOOD_NUM',
      'MUTATE_SELECTED',
      'DELETE_ITEM'
    ]),
    handle () {
      if (this.goodsNumber) {
        this.HANDLE({
          handlemsg: !this.handlemsg
        })
      } else {
        alert('xxxxxx')
      }
    },
    setGoodsNum (key, num) {
      this.SET_GOOD_NUM({
        key,
        number: num,
        token: getToken()
      })
    },
    setGoodsChecked (key, checkeded) {
      console.log(key, checkeded)
      // // 单个商品选中
      this.MUTATE_SELECTED({
        key,
        selected: checkeded,
        token: getToken()
      })
    },
    delthisGoods (key) {
      Dialog.confirm({
        message: '删这个？'
      }).then(() => {
        this.DELETE_ITEM({
          key,
          token: getToken()
        })
      })
    },
    delCheckedGoods () {
      const checkedGoods = this.goodslist.filter((item) => item.selected)
      const checkedGoodsKeys = []
      for (var i = 0; i < checkedGoods.length; i++) {
        checkedGoodsKeys.push(checkedGoods[i].key)
      }
      if (checkedGoodsKeys.length === 0) {
        Toast.fail('没有选中任何商品')
        return false
      }
      Dialog.confirm({
        message: '删这个？'
      }).then(() => {
        this.DELETE_ITEM({
          key: checkedGoodsKeys.join(','),
          token: getToken()
        })
      })
    },
    goOrder () {
      this.$router.push('/order')
    }
  },
  computed: {
    ...mapState({
      goodslist: (state) => state.Cart.goodsList,
      goodsNumber: (state) => state.Cart.goodsNumber,
      goodsPrice: (state) => state.Cart.goodsPrice,
      handlemsg: (state) => state.Cart.handlemsg
    }),
    allChecked: {
      // 全选
      get () {
        return this.goodslist.every((item) => item.selected)
      },
      set (allChecked) {
        const keys = []
        this.goodslist.forEach((item) => {
          keys.push(item.key)
        })
        this.MUTATE_SELECTED({
          key: keys.join(','),
          selected: allChecked,
          token: getToken()
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.item-head {
  position: fixed;
  z-index: 99999999999999;
  top: 0;
  width: 100%;
  padding: 0.15rem 0;
  box-sizing: border-box;
  height: 0.88rem;
  display: flex;
  border-bottom: 1px solid #ff344d;
  .back,
  .changestyle {
    text-align: center;
    width: 18%;
    font-size: 0.28rem;
    line-height: 0.56rem;
  }
  .gosearch {
    flex: 1;
    text-align: center;
    font-size: 0.32rem;
    line-height: 0.56rem;
    color: #000;
  }
}
.goodslist {
  padding-top: 1rem;
  position: relative;
  padding-bottom: 1.95rem;
  li {
    display: flex;
    /deep/ .van-checkbox {
      margin-left: 0.15rem;
      padding-right: 0.15rem;
      .goods-card {
        padding: 0.16rem 0.32rem 0.16rem 0;
        margin: 0;
        background-color: white;
        box-sizing: border-box;
      }
      .van-checkbox__icon {
        font-size: 0.36rem;
        height: 0.36rem !important;
        width: 0.36rem !important;
      }
      .van-checkbox__icon .van-icon {
        height: 0.36rem !important;
        width: 0.36rem !important;
      }
    }
    /deep/ .van-swipe-cell {
      display: inline-block;
      flex: 1;
    }
  }
  .delete-button {
    height: 100%;
  }
  /deep/ .van-stepper.van-stepper--round {
    position: absolute;
    right: 0.2rem;
    bottom: 0.7rem;
  }
}

/deep/ .van-submit-bar {
  bottom: 0.9rem;
  border-top: 1px solid rgb(218, 217, 217);
  z-index: 9999999999999999;
  .van-submit-bar__button {
    padding: 0 0.3rem;
    width: 2.2rem;
    height: 0.8rem;
    font-size: 0.3rem;
    font-weight: 500;
    border: none;
  }
  .van-submit-bar__bar {
    height: 1rem;
    padding: 0 0.32rem;
  }
  .van-checkbox__icon {
    font-size: 0.34rem;
    padding-top: 0.05rem;
  }
  .van-submit-bar__text span {
    font-size: 0.24rem;
    padding-top: 0.05rem;
    span {
      font-size: 0.34rem;
    }
  }
  .dellall {
    position: absolute;
    z-index: 99999999;
    left: 1.8rem;
    font-size: 0.24rem;
    padding: 0.01rem 0.1rem;
    background: linear-gradient(to right, #ff6034, #ee0a24);
    color: #fff;
    border-radius: 0.08rem;
    line-height: 0.46rem;
  }
}
/deep/ .van-checkbox__label {
  margin-left: 0.16rem;
  color: #323233;
  line-height: 0.4rem;
  font-size: 0.28rem;
  padding-top: 0.05rem;
  width: 100% !important;
}
/deep/ .van-submit-bar .van-button--round {
  border-radius: 0.1rem;
}
</style>
